<template>
    <el-drawer v-model="isDrawerVisible" title="管理员详情" :with-header="true">
        <el-descriptions
            direction="vertical"
            :column="2"
            border
        >
            <el-descriptions-item label="ID">{{admin.id}}</el-descriptions-item>
            <el-descriptions-item label="管理员名称">{{admin.name}}</el-descriptions-item>
            <el-descriptions-item label="真实姓名">{{admin.realname}}</el-descriptions-item>
        </el-descriptions>
        <div style="text-align: center; margin-top: 20px;">
            <el-button type="primary" @click="isDrawerVisible = false">返回</el-button>
        </div>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

// 表单数据
const admin = ref({
    id: '',
    name: '',
    realname: ''
});

// 接收父组件传递过来的 管理员 数据
const handleDetailData = (obj) => {
    isDrawerVisible.value = true;
    admin.value = {...obj};
}

// 将 handleDetailData 暴露给父组件
defineExpose({
    handleDetailData
})
</script>

<style scoped>
.detail-page {
    padding: 20px;
}
</style>